import React, { useState, useEffect } from 'react'
import { Modal, Select } from '@kedacom/react-next'
import { StyledChannelConfig } from '../../style'
import { fetchLoadVenners } from '@/api/sysConfig/tvWallConfig'
import { ChannelData } from '../../interface'
import { t } from 'i18next'

interface ChannelConfigProps {
	initialValue: {
		initialId: string
		initialNum: string
	}
	isShow: boolean
	setIsShow: (val: boolean) => void
	onConfirm: (hduId: string, hduName: string, channelNum: string) => void
}
export default function ChannelConfig({ initialValue, isShow, setIsShow, onConfirm }: ChannelConfigProps) {
	const [hduId, setChannelId] = useState('0')
	const [channelNum, setChannelNum] = useState('0')
	const [channelData, setChannelData] = useState<ChannelData[]>([])
	const [nameList, setNameList] = useState([
		{
			label: t('请选择'),
			value: '0',
		},
	])
	const [channelNumList, setChannelNumList] = useState([
		{
			label: t('请选择'),
			value: '0',
		},
	])

	useEffect(() => {
		fetchLoadVenners().then((data) => {
			if (data && data.length !== 0) {
				let _channelData = data.map((item) => ({
					id: item.hdu_ids[0].split('_')[0],
					alias: item.hdu_alias,
					channelNum: item.hdu_ids.map((item) => item.split('_')[1]),
				}))
				let _nameList = _channelData.map((item) => ({
					value: item.id,
					label: item.alias,
				}))
				setNameList(_nameList)
				setChannelData(_channelData)
				setChannelId(_nameList[0].value) //默认选中第一个
			}
		})
	}, [])

	useEffect(() => {
		let _channelNum = channelData
			.find((item) => item.id === hduId)
			?.channelNum.map((item) => ({ label: item, value: item }))
		if (_channelNum) {
			setChannelNumList(_channelNum)
			setChannelNum(_channelNum[0].value)
		}
	}, [hduId, channelData])

	useEffect(() => {
		setChannelId(
			initialValue.initialId === '' || nameList[0].value === '0' ? nameList[0].value : initialValue.initialId
		)
		setChannelNum(
			initialValue.initialNum === '' || nameList[0].value === '0'
				? channelNumList[0].value
				: initialValue.initialNum
		)
	}, [initialValue])

	const handelOk = () => {
		setIsShow(false)
		let name =
			nameList.find((item) => {
				return item.value === hduId
			})?.label ?? ''
		if (!name || name === t('请选择')) return
		onConfirm(hduId, name, channelNum)
	}

	return (
		<>
			<Modal
				className="tvwall-config-modal"
				open={isShow}
				title={t('通道配置')}
				width={416}
				height={258}
				onOk={handelOk}
				onCancel={() => {
					setIsShow(false)
				}}
				okText={t('确定')}
				cancelText={t('取消')}
			>
				<StyledChannelConfig>
					<div className="line">
						<div className="label">{t('设备名称：')}</div>
						<Select
							width={200}
							value={hduId}
							options={nameList}
							onChange={(e, value) => setChannelId(value)}
							panelPreventOverflow={false}
						/>
					</div>
					<div className="line">
						<div className="label">{t('通道号：')}</div>
						<Select
							width={200}
							value={channelNum}
							options={channelNumList}
							onChange={(e, value) => {
								setChannelNum(value)
							}}
							panelPreventOverflow={false}
						/>
					</div>
				</StyledChannelConfig>
			</Modal>
		</>
	)
}
